<template>
  <div class="cinema-list">
    <van-nav-bar title="影院" @click-left="handleClickLeft()" @click-right="handleClickRight">
      <template #left>
        {{ $store.state.cityName }}
        <van-icon color="black" name="arrow-down" size="12"/>
      </template>
      <template #right>
        <van-icon color="black" name="search" size="24"/>
      </template>
    </van-nav-bar>
    <div :style="{height: height}" class="cinema-list-wrap">
      <ul>
        <li v-for="(item, index) in $store.state.cinemaList" :key="index" class="cinema-list-item">
          <div class="cinema-info">
            <span class="cinema-name">{{ item.name }}</span>
            <span class="cinema-address">{{ item.address }}</span>
          </div>
          <div class="cinema-info">
            <span class="cinema-price"><span style="font-size: 10px;">￥</span>{{ item.lowPrice / 100 }}<span
              style="font-size: 10px;">起</span></span>
            <span class="cinema-distance"></span>
          </div>
          <div class="dividing-line"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import Vue from 'vue'
import {Icon, NavBar} from 'vant'

Vue.use(NavBar).use(Icon)

export default {
  name: 'Cinema',
  data() {
    return {
      height: 0
    }
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 94 + 'px'
    if (this.$store.state.cinemaList.length === 0) {
      // TODO：vuex异步流程？
      this.$store.dispatch('getCinemaList', this.$store.state.cityId).then(res => {
        // 状态立即更改，但是DOM异步渲染
        this.$nextTick(() => {
          new BetterScroll('.cinema-list-wrap', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      this.$nextTick(() => {
        new BetterScroll('.cinema-list-wrap', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
  },
  methods: {
    handleClickRight() {
      this.$router.push('/cinema/search')
    },
    handleClickLeft() {
      this.$store.commit('clearList')
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-list {
  .cinema-list-wrap {
    //padding-top: 23.73vw;
    overflow: hidden;
    font-size: 15px;
    position: relative; //修正滚动条的位置，搭配better-scroll用
    .cinema-list-item {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 15px;
      position: relative;

      .cinema-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 65%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .cinema-address {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          margin-top: 5px;
          color: #797d82;
        }

        .cinema-price {
          color: #ff5f16;
        }
      }
    }
  }
}

.dividing-line {
  height: 1px;
  width: 92%;
  border-bottom: 1px solid #ededed;
  position: absolute;
  bottom: 0;
}
</style>
